:host {
  padding: 0 0.5rem;
  background-color: #fff;
  width: 100%;
}
.card-container {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-template-rows: 3rem 1fr 2rem 2rem;
  grid-gap: 5px;
  grid-template-areas: 'image title' 'image .' 'image tags' 'image price';
  place-content: stretch;
  place-items: stretch;
  padding: 0 5px;
}
.card-container .product-img {
  grid-area: image;
  object-fit: contain;
  width: 10rem;
  height: 10rem;
  padding: 0.5rem 0;
}
.card-container .product-img img {
  width: 100%;
  height: 100%;
}
.card-container .product-title {
  grid-area: title;
  padding: 0.6rem 0;
}
.card-container .product-tags {
  grid-area: tags;
}
.card-container .product-tags span {
  margin-bottom: 0.6rem;
}
.card-container .product-price {
  grid-area: price;
  padding-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.card-container .product-price .avatar {
  display: flex;
  flex-wrap: nowrap;
}
.card-container .product-price .avatar img {
  display: inline-block;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #999999;
}
